<template>
  <div class="node-item" ref="node" :class="isActive ? 'active' : ''" :style="flowNodeContainer"
    @click="changeLineState($event)" @mouseenter="showAnchor" @mouseleave="hideAnchor">
    <div class="log-wrap" :class="node.status?'active-status':'error-status'"></div>
    <div class="nodeName">
      <div class="nodeName_header">
        <span class="iconfont" :class="node.icon"></span>
        <span>{{ node.nodeName }}</span>
      </div>
      <div class="nodeName_body">
        <i v-if="node.status" class="cursor_point px_4 iconfont icon-yanjing-zhengyan"
          @click="handleShowData($event,node)"></i>
        <i class="cursor_point px_4 iconfont icon-peizhi1" v-if="nodeOpVisible(node) && node.type !== 'output'"
          @click="handleShowConfigLib($event)"></i>
        <i class="cursor_point px_4 iconfont icon-shanchu" v-if="nodeOpVisible(node) && data_etl.status === 0"
          @click="deleteNode($event)"></i>
      </div>
    </div>
    <!--连线用--//触发连线的区域-->
    <div class="node-anchor anchor-top" v-show="mouseEnter"></div>
    <div class="node-anchor anchor-right" v-show="mouseEnter"></div>
    <div class="node-anchor anchor-bottom" v-show="mouseEnter"></div>
    <div class="node-anchor anchor-left" v-show="mouseEnter"></div>
  </div>
</template>

<script>
import { computed, defineComponent, inject, onMounted, ref } from "vue";
import { useEtlStore } from "../../../../store/flowEtl";
import { etlType } from "../../../../utils/constant";

export default defineComponent({
  name: "flow-panel-node",
  props: {
    node: {
      type: Object,
    },
    isActive: {
      type: Boolean,
    },
  },
  components: {},
  emits: ["deleteNode", "changeLineState", "setNode"],
  setup(props, ctx) {
    const showNodeData = inject("showNodeData");
    const mouseEnter = ref(false);
    const etlStore = useEtlStore();
    const data_etl_id = computed(() => etlStore.data_etl_id);
    const lineList = computed(() => etlStore.lineList);
    const nodeList = computed(() => etlStore.nodeList);
    const data_etl = computed(() => etlStore.data_etl);
    const flowNodeContainer = computed(() => {
      return {
        top: props.node.top,
        left: props.node.left,
      };
    });
    const showAnchor = () => {
      mouseEnter.value = true;
    };
    const hideAnchor = () => {
      mouseEnter.value = false;
    };
    const deleteNode = (e) => {
      // 阻止向父组件冒泡
      e.stopPropagation();
      e.preventDefault();
      ctx.emit("deleteNode", props.node);
    };
    // 配置数据
    const handleShowConfigLib = (e) => {
      // 阻止向父组件冒泡
      e.stopPropagation();
      e.preventDefault();
      if (etlType.includes(props.node.type)) {
        let joinNum = lineList.value.filter((item) => {
          return item.to === props.node.id;
        }).length;
        if (joinNum !== 1) {
          ElMessage({
            type: "warning",
            message: "请配置一个源节点",
          });
          return;
        }
      }
      if (["join", "union"].includes(props.node.type)) {
        let joinInfo = lineList.value.filter((item) => {
          return item.to === props.node.id;
        });
        if (joinInfo.length !== 2) {
          ElMessage({
            type: "warning",
            message: "请配置两个源节点",
          });
          return;
        } else {
          let nodes = [...nodeList.value].map((v) => {
            if (props.node.id === v.id) {
              let sourceNode = [...nodeList.value].find(
                (item) => item.id === joinInfo[0].from
              );
              let originNode = [...nodeList.value].find(
                (item) => item.id === joinInfo[1].from
              );
              let sourceFields = sourceNode.config.fields.map((item, index) => {
                return {
                  ...item,
                  join: "source",
                  id: `source_${index}`,
                  COLUMN_NAME: item.alias,
                };
              });
              let originFields = originNode.config.fields.map((item, index) => {
                return {
                  ...item,
                  join: "origin",
                  id: `origin_${index}`,
                  COLUMN_NAME: item.alias,
                };
              });
              v.sourceNode = {
                name: sourceNode.nodeName,
                id: sourceNode.id,
              };
              v.originNode = {
                name: originNode.nodeName,
                id: originNode.id,
              };
              v.originFields = [...sourceFields, ...originFields];
            }
            return v;
          });
          etlStore.setNodeList(nodes);
        }
      }
      ctx.emit("setNode", props.node);
    };
    // 查看数据
    const handleShowData = (e, item) => {
      e.stopPropagation();
      e.preventDefault();
      showNodeData(props.node);
      // ctx.emit("showData", props.node);
    };
    const changeLineState = (e) => {
      // 阻止向父组件冒泡
      e.stopPropagation();
      e.preventDefault();
      ctx.emit("changeLineState", props.node);
    };
    const nodeOpVisible = (node) => {
      if (node.status) {
        let line = lineList.value.find((item) => {
          return item.from === node.id;
        });
        if (line) {
          return false;
        } else {
          return true;
        }
      } else {
        return true;
      }
    };
    onMounted(() => {});
    return {
      lineList,
      data_etl,
      flowNodeContainer,
      mouseEnter,
      data_etl_id,
      nodeList,
      nodeOpVisible,
      showAnchor,
      hideAnchor,
      deleteNode,
      handleShowConfigLib,
      handleShowData,
      changeLineState,
      showNodeData,
      etlType,
    };
  },
});
</script>

<style lang="less" scoped>
@labelColor: #409eff;
@nodeSize: 6px;
@viewSize: 10px;
@labelErrorColor: #f44336;
.node-item {
  position: absolute;
  display: flex;
  width: 170px;
  height: 64px;
  border: 1px solid #666666;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  cursor: move;
  box-sizing: content-box;
  z-index: 9995;

  &:hover {
    z-index: 9998;
    border-color: @labelColor;

    .delete-btn {
      display: block;
    }
  }

  .log-wrap {
    width: 4px;
    height: 100%;
    background-color: @labelColor;
    border-radius: 4px 0 0 4px;
  }

  .error-status {
    background-color: @labelErrorColor;
  }

  .active-status {
    background-color: @labelColor;
  }

  .nodeName {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    height: 100%;

    .nodeName_header {
      padding: 0 4px 0 0;
      margin: 0;
      height: 30px;
      border-bottom: 1px dotted #666666;

      &:hover {
        border-bottom: 1px dotted @labelColor;
      }

      span {
        font-size: 14px;

        &:first-child {
          margin: 0 8px 0 4px;
        }
      }
    }

    .nodeName_body {
      display: flex;
      justify-items: center;
      justify-content: flex-end;
      align-items: center;
      margin: 0;
      height: 34px;
      padding-right: 8px;

      span {
        font-size: 14px;

        &:first-child {
          margin: 0 8px 0 4px;
        }
      }
    }
  }

  .node-anchor {
    display: flex;
    position: absolute;
    width: @nodeSize;
    height: @nodeSize;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    cursor: crosshair;
    z-index: 999;
    background: white;
  }

  .anchor-top {
    top: calc((@nodeSize / 2) * -1);
    left: 50%;
    margin-left: calc((@nodeSize / 2) * -1);
  }

  .anchor-right {
    top: 50%;
    right: calc((@nodeSize / 2) * -1);
    margin-top: calc((@nodeSize / 2) * -1);
  }

  .anchor-bottom {
    bottom: calc((@nodeSize / 2) * -1);
    left: 50%;
    margin-left: calc((@nodeSize / 2) * -1);
  }

  .anchor-left {
    top: 50%;
    left: calc((@nodeSize / 2) * -1);
    margin-top: calc((@nodeSize / 2) * -1);
  }
}

.active {
  border: 1px dashed @labelColor;
  background-color: rgb(42 177 232 / 20%);
  box-shadow: 0px 5px 9px 0px rgba(0, 0, 0, 0.5);

  .nodeName .nodeName_header {
    border: 1px dashed @labelColor;
  }
}
</style>